<template>
    <div style="width: 100%">
        <p>动态示例</p>
        <el-button type="text" @click="queryData" :disabled="timer">获取数据</el-button><el-button :disabled="!timer" type="text" @click="stopQuery">暂停</el-button>
        <div id="echart-dynamic" style="width: 800px; height: 400px;margin:auto !important;"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import  {echart as api} from '@/api/api'
    export default {
        name: "echart-dynamic",
        data(){
            return {
                timer: null,
                length: 150,
                myChart: null,
                legend: [],
                xData: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
                ao: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
                bo: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
                co: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
                option: {}
            }
        },
        activated(){
            console.log("activated");
            this.$nextTick(()=> {
                this.initChart();
            });
        },
        mounted() {
            console.log("mounted");
        },
        created(){
            console.log("created")
        },
        beforeDestroy(){
            clearInterval(this.timer)
            this.timer = null
        },
        deactivated(){
            clearInterval(this.timer)
            this.timer = null
        },
        methods: {
            initChart: function(){
                this.myChart = echarts.init(document.getElementById('echart-dynamic'));
                // 绘制图表myChart.resize({
                this.myChart.resize({
                    width: 800,
                    height: 400
                });
                this.myChart.setOption({
                    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                    title: {
                        text: 'Gradient Stacked Area Chart'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['Line 1', 'Line 2', 'Line 3']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            // type: 'category',
                            boundaryGap: false,
                            data: this.xData,
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'A标签',
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(128, 255, 165)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(1, 191, 236)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.ao
                        },
                        {
                            name: 'B标签',
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(0, 221, 255)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(77, 119, 255)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.bo
                        },
                        {
                            name: 'C标签',
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(55, 162, 255)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(116, 21, 219)'
                                    }
                                ])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.co
                        }
                    ]
                });
            },
            stopQuery(){
              clearInterval(this.timer)
                this.timer = null
            },
            queryData(){
                if (this.timer != null) {return;}
               this.timer =  setInterval(() =>{
                    api.statistic({}).then(data => {
                        if (data.code === '00000') {
                            console.log(data)
                            this.ao.push(data.data.ao[0].num);
                            this.bo.push(data.data.bo[0].num);
                            this.co.push(data.data.co[0].num);

                                this.ao.shift();
                                this.bo.shift();
                                this.co.shift();
                                this.length++;
                                this.xData.push(this.length);
                                this.xData.shift();



                            this.myChart.setOption({
                                xAxis: {
                                    data: this.xData
                                },
                                series: [
                                    {
                                        name: 'A标签',
                                        data: this.ao
                                    },
                                    {
                                        name: 'B标签',
                                        data: this.bo
                                    },
                                    {
                                        name: 'C标签',
                                        data: this.co
                                    }
                                ]
                            });
                        }
                    })
                }, 1500);

            }
        }
    }
</script>

<style scoped>

</style>
